<template>
  <Header></Header>
  <contentPart></contentPart>
</template>
<script setup>
import { onMounted } from "vue";
import contentPart from "../components/content.vue"; //内容

//解决缩放适配问题
const widthZoom = () => {
  //ratio为当前缩放比例
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  let view = document.querySelector("body");
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf("msie")) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }

  if (ratio && ratio !== 1) {
    if (ratio >= 2) {
      ratio = ratio / 2;
    } else if (ratio >= 3) {
      ratio = ratio / 3;
    }

    view.style.zoom = -0.62 * ratio + 1.65;
  }
};

//初始调用
widthZoom();

onMounted(() => {
  //监听并调用缩放适配函数
  console.log();
  window.addEventListener("resize", () => {
    widthZoom();
  });
});
</script>
 <style lang="less" scoped>
</style>
